
import React, { Component } from 'react'

// 导入外部样式，不是通过模块化的方式导入的，而是通过 link 导入的
import './02-style.css'

import classNames from 'classnames'

/*
    1. 安装 npm install classnames
    2. 导入：classNames
    3. 定义 class
    const h1Class = classNames({
            active: this.state.flag,
            error: !this.state.flag,
            content: true
    })
    4. 在标签中使用
*/



export default class App extends Component {


    state = {
        flag: true
    }

    // render 会在组件初次渲染，和组件更新阶段执行
    render() {

        // 定义 class
        const h1Class = classNames({
            active: this.state.flag,
            error: !this.state.flag,
            content: true
        })

        return (
            <div>

                <h1 className={h1Class} onClick={() => {
                    this.setState({
                        flag: !this.state.flag
                    })
                }}>结婚为了幸福，离婚也是，不结也是。</h1>

            </div >
        )
    }
}
